<template>
  <div class="card" style="width: 400px">
    <el-form :model="data.form" :rules="data.rules" ref="formRef" label-width="80px" >
      <el-form-item label="旧密码" prop="oldPassword">
        <el-input v-model="data.form.oldPassword" type="password" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="新密码" prop="newPassword">
        <el-input v-model="data.form.password" type="password" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="confirmPassword">
        <el-input v-model="data.form.confirmPassword" type="password" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="modifyPassword">确认</el-button>
        <el-button @click="">取消</el-button>
      </el-form-item>

    </el-form>
  </div>
</template>
<script setup>

import {reactive,ref} from "vue";
import {ElMessage} from "element-plus";
import request from "@/utils/request.js";
import ModifyPassword from "@/views/modifyPassword.vue";

const formRef = ref()

const validatePass1 = (rule, value, callback) =>
{
  console.log('用户输入的旧密码:', value);
  console.log('本地存储的旧密码:', data.user.password);
  if (!value) {
    callback(new Error("请输入旧密码"))
  } else if (value !== data.user.password) {
    callback(new Error("旧密码错误"))
  } else {
    callback()
  }
}
const validatePass2 = (rule, value, callback) => {
  if (!value) {
    callback(new Error('请输入验证密码'))
  }
   else if(value !== data.form.password) {
    callback(new Error("两次密码不一致!"))
  }else {
    callback()
  }
}
const data = reactive({
  user:JSON.parse(localStorage.getItem("zwy-user")),
  form: {
    id:'',
    role:'',
    oldPassword:'',
    password: '',
    confirmPassword: ''
  }
  , rules: {
    oldPassword: [
        { required: true, message: '请输入旧密码', trigger: 'blur' },
      {validator: validatePass1, trigger: 'blur'}
    ]
    , confirmPassword: [
        { required: true, message: '请输入验证密码', trigger: 'blur' },
      {validator: validatePass2, trigger: 'blur'}
    ]
  }

})

data.form.id=data.user.id
data.form.role=data.user.role

console.log(data.user.password)

const modifyPassword = () => {
  const validate = formRef.value.validate;
  if(validate){
      request.put('/modifyPassword', data.form).then(res =>{
        if(res.code === '200'){
          ElMessage.success('修改成功');
          data.user.password=data.form.password;
          // 清空表单数据,没有写的就是空
          data.form = {
            id: data.user.id,
            role: data.user.role,
          };
          localStorage.setItem('zwy-user',JSON.stringify(data.user))
        }else {
          ElMessage.error(res.code + '/n' + res.msg);
        }
      }).catch(error => {
        if (error.response && error.response.status === 400) {
          // 处理 400 错误
          ElMessage.error('请求参数错误：' + error.response.data.msg);
        } else {
          // 处理其他错误
          ElMessage.error('请求失败：' + error.message);
        }
      });
    }
    else{return}

}


</script>
